<template>
  <div class="pagestyle">
    <list_controller ref="zujianname" :options="state.options" :noprintDownShow="true">
      <template v-slot:opraCurdBtnlist="row">
        <span>
          <el-button
            class="tableFontSize"
            type="primary"
            link
            size="small"
            @click="lookBtn(row.row.row)"
            >报警记录
          </el-button>
          <el-button
            class="tableFontSize"
            type="primary"
            link
            size="small"
            @click="editBtn(row.row.row)"
            >编辑
          </el-button>
          <el-button
            class="tableFontSize"
            type="primary"
            link
            size="small"
            @click="deleteBtn(row.row.row)"
            >删除
          </el-button>
        </span>
      </template>
      <template v-slot:opraCurdBtnAll>
        <span
          :class="state.addModal ? 'listInfoBtn active' : 'listInfoBtn'"
          @click="addBtn('mul')"
        >
          <svg-icon
            :class="state.addModal ? 'active' : ''"
            class-name="search-icon"
            icon-class="xinzeng"
          />
          新增
        </span>
        <span :class="'listInfoBtn'" @click="deleteBtn('mul')">
          <svg-icon class-name="search-icon" icon-class="shanchu" />
          删除
        </span>
      </template>
      <template v-slot:selectNamelist> 突变预警 </template>
    </list_controller>
    <!-- 新增弹框 -->
    <teleport to="body">
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="800"
        v-model="state.addModal"
        resize
        :mask="true"
        showFooter
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">{{ state.modalTitle }}</div>
        </template>
        <template #default>
          <div class="form_box">
            <el-form
              ref="formRef"
              :model="state.formData"
              :rules="state.rules"
              label-position="top"
            >
              <el-row :gutter="20">
                <el-col :span="8" style="margin-left: 15px">
                  <el-form-item label="突变类型" prop="mutationType">
                    <el-select
                      class="w100"
                      clearable
                      filterable
                      v-model="state.formData.mutationType"
                      placeholder="请选择"
                      @change="stationModelChange"
                    >
                      <el-option
                        v-for="item in state.stationmodelList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="state.comparaShow">
                  <el-form-item label="比较类型" prop="comparationType">
                    <el-select
                      class="w100"
                      clearable
                      filterable
                      v-model="state.formData.comparationType"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in state.stationInNumList"
                        :key="item"
                        :label="item"
                        :value="item"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24" class="twoTable">
                  <querybox
                    :queryList="state.optionsTwo.queryList.querys"
                    @query="queryClick"
                  >
                  </querybox>
                  <vxe-table
                    height="200"
                    :data="state.dataList"
                    border="inner"
                    @checkbox-change="checkchange"
                  >
                    <vxe-column type="checkbox" :width="42"></vxe-column>
                    <vxe-column
                      type="seq"
                      :width="55"
                      title="序号"
                    ></vxe-column>
                    <vxe-column
                      v-for="(item, index) in state.optionsTwo.tableheads"
                      :field="item.field"
                      :title="item.title"
                      :params="{ name: item.name }"
                      :width="item.width ? item.width : ''"
                      :key="index"
                    >
                    </vxe-column>
                  </vxe-table>
                </el-col>
                <el-col :span="8" style="margin-top: 40px">
                  <el-form-item label="解报门限" prop="undoAlarmThreshold">
                    <el-input
                      v-model="state.formData.undoAlarmThreshold"
                      placeholder="请输入"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" style="margin-top: 40px">
                  <el-form-item label="增量" prop="increment">
                    <el-input
                      v-model="state.formData.increment"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </template>
        <template #footer>
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm"> 确定 </el-button>
        </template>
      </vxe-modal>
    </teleport>
    <teleport to="body">
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="800"
        v-model="state.editModal"
        resize
        :mask="true"
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">{{ state.modalTitle }}</div>
        </template>
        <template #default>
          <div class="form_box">
            <el-form
              ref="formRefedit"
              :model="state.editformData"
              :rules="state.editrules"
              label-position="top"
            >
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="测点">
                    <el-input
                      disabled
                      v-model="state.pointValue"
                      placeholder="请输入"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="突变类型" prop="mutationType">
                    <el-select
                    disabled
                      class="w100"
                      clearable
                      filterable
                      v-model="state.editformData.mutationType"
                      placeholder="请选择"
                      @change="stationModelChange"
                    >
                      <el-option
                        v-for="item in state.stationmodelList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if="state.comparaShow">
                  <el-form-item label="比较类型" prop="comparationType">
                    <el-select
                      class="w100"
                      clearable
                      filterable
                      v-model="state.editformData.comparationType"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in state.stationInNumList"
                        :key="item"
                        :label="item"
                        :value="item"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="解报门限" prop="undoAlarmThreshold">
                    <el-input
                      v-model="state.editformData.undoAlarmThreshold"
                      placeholder="请输入"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="增量" prop="increment">
                    <el-input
                      v-model="state.editformData.increment"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div class="form_footer">
              <el-button @click="canceledit">取消</el-button>
              <el-button type="primary" @click="submitFormedit">
                确定
              </el-button>
            </div>
          </div>
        </template>
      </vxe-modal>
    </teleport>
    <!-- 报警记录 -->
    <el-drawer
      v-model="state.drawerShow"
      direction="rtl"
      size="40%"
      close-on-click-modal
      :modal="true"
    >
      <template #header="{ close, titleId, titleClass }">
        <h4 class="mask_sub_title">
          <svg-icon class-name="search-icon" icon-class="biaotitubiao" /><span
            >报警记录信息</span
          >
        </h4>
      </template>
      <template #default>
        <recordInfo :recordInfoList="state.recordInfoList" @querybjjlClick="querybjjlClick"
        :bjjlThead="state.bjjlThead" :bjjlObj="state.bjjlObj"></recordInfo>
      </template>
      <template #footer>
          <p>
            <el-button type="info">取消</el-button>
            <el-button type="primary">确定</el-button>
          </p>
      </template>
    </el-drawer>
  </div>
</template>
<script setup>
import querybox from "@/components/commonCom/querybox";
import list_controller from "@/components/commonCom/list_controller";
import recordInfo from "./alarmInfo/recordInfo";
import dayjs from "dayjs";
import { computed, reactive } from "vue";
 import {
    ElMessage,
    ElMessageBox
  } from 'element-plus'
import { table_headers } from "@/components/commonCom/table_headers";
import axios from "@/utils/request";
import usePagesStore from "@/store/modules/pages";
import {
  getlistSitesList,
  getlistmutationAlarmTypesList,
  getcompareTypesList,
} from "@/api/config";
const { proxy } = getCurrentInstance();
const store = usePagesStore();
const router = useRouter();
let previewHttps = import.meta.env.VITE_APP_HTTP;
const upload = ref(null);
let state = reactive({
  bjjlObj:{
    dataUrl:"/hisPointAlarm/listSimulateAlarmPoints",
    listTable:[],
    bjjlThead:computed(() => table_headers.hisPointMutationDetail), //模拟量
  },
  pointValue: undefined,
  dataList: [],
  comparaShow: true,
  drawerShow: false,
  options: {
    tableheads: computed(() => table_headers.configMutation),
    queryList: {
      dropdownUrl: "",
      querys: [
        {
          field: "stationCode",
          title: "分站",
          type: "select",
          binddata: "",
          options: [],
        },
        {
          field: "comparationType",
          title: "比较类型",
          type: "select",
          binddata: "",
          options: [],
        },
      ],
      queryMap: new Map([
        ["sensorTypeId", "safety_pointType"],
        ["deviceTypeId", "safety_deviceType"],
        ["alarmTypeId", "alarmType"],
      ]),
    },
    dataUrl: "/mutation/list",
    delUrl: "/mutation/del",
    addUrl: "/mutation/add",
    descUrl: "/mutation/getById",
    editUrl: "mutation/update",
  },
  // 表单
  addModal: false,
  editModal: false,
  modalTitle: "新增突变预报警",
  formRef: null,
  formData: {},
  rules: {
    mutationType: [
      {
        required: true,
        message: "请输入新增类型",
        trigger: "change",
      },
    ],
    comparationType: [
      {
        required: true,
        message: "请选择比较类型",
        trigger: "change",
      },
    ],
    undoAlarmThreshold: [
      {
        required: true,
        message: "请输入解报门限",
        trigger: "blur",
      },
    ],
    increment: [
      {
        required: true,
        message: "请输入增量",
        trigger: "blur",
      },
    ],
  },
  editId: undefined,
  stationmodelList: [],
  stationInNumList: [],
  optionsTwo: {
    tableheads: computed(() => table_headers.mutationPoint),
    queryList: {
      querys: [
        {
          field: "code",
          title: "测点编号",
          type: "input",
          binddata: "",
        },
        {
          field: "name",
          title: "测点名称",
          type: "input",
          binddata: "",
        },
        {
          field: "place",
          title: "安装地点",
          type: "input",
          binddata: "",
        },
        {
          field: "isFlag",
          title: "隐藏条件",
          type: "yincang",
          binddata: true,
        },
      ],
      queryMap: new Map([
        ["sensorTypeId", "safety_pointType"],
        ["deviceTypeId", "safety_deviceType"],
        ["alarmTypeId", "alarmType"],
      ]),
    },
    dataUrl: "/mutation/listPoints",
  },
  editformData: {},
  editrules: {
    mutationType: [
      {
        required: true,
        message: "请输入新增类型",
        trigger: "change",
      },
    ],
    comparationType: [
      {
        required: true,
        message: "请选择比较类型",
        trigger: "change",
      },
    ],
    undoAlarmThreshold: [
      {
        required: true,
        message: "请输入解报门限",
        trigger: "blur",
      },
    ],
    increment: [
      {
        required: true,
        message: "请输入增量",
        trigger: "blur",
      },
    ],
  },
  recordInfoList:[
    {
      col:12,
      type:'input',
      label:'报警次数',
      field:'cishu',
      binddata:undefined
    },
    {
      col:12,
      type:'input',
      label:'累计报警时间',
      field:'cishu',
      binddata:undefined
    }
  ],
  queryObj:{}
});

//    报警记录
function lookBtn(row) {
  state.drawerShow = true;
  state.queryObj.pointIdList = [row.code]
}
// 报警记录-查询按钮-详情接口
function querybjjlClick(val){
  state.queryObj.filterStartTime = dayjs(val.startTime).format('YYYY-MM-DD HH:mm:ss.SSS')
  state.queryObj.filterEndTime = dayjs(val.endTime).format('YYYY-MM-DD HH:mm:ss.SSS')
  getTBDetail(state.queryObj)
}
// 获取突变预警详情
const getTBDetail = (obj) => {
  axios.post('/hisPointMutation/attainMutationDetail',obj).then(res => {

  })
}
// 新增按钮
function addBtn(row) {
  state.modalTitle = "新增突变预报警";
  state.addModal = true;
  state.formData = {};
  state.editId = undefined;
  state.fileList = [];
  state.dataList = [];
}

// 编辑按钮
function editBtn(row) {
  state.pointValue = row.code + "-" + row.name;
  state.modalTitle = "编辑突变预报警";
  state.editModal = true;
  axios
    .post(state.options.descUrl, {
      id: row.id,
    })
    .then((res) => {
      if (res.code == 200) {
        state.editformData = res.data;
        state.editId = res.data.id;
        if (res.data.mutationType == "瓦斯突变预报警") {
          state.comparaShow = true;
        } else {
          state.comparaShow = false;
        }
      }
    });
}

function deleteBtn(row) {
  let ids = [];
  if (row != "mul") {
    ids = [row.id];
  } else {
    if (store.records.length > 0) {
      ids = store.records.map((item) => {
        return item.id;
      });
    } else {
      proxy.$modal.msgSuccess("请先勾选所要删除数据!");
    }
  }
  if (ids.length > 0) {
      ElMessageBox.confirm(
          '确定要删除该数据吗?',
          '温馨提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
        .then(() => {
          axios.post(state.options.delUrl, ids).then(res => {
            if (res.code == 200) {
              proxy.$refs['zujianname'].getData()
              state.addModal = false
              ElMessage({
                type: 'success',
                message: res.msg,
              })
              store.records = []
            }
          })

        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '删除取消',
          })
        })
    }
}
// 新增突变预警测点列表
function getpointList(data) {
  data = {};
  state.optionsTwo.queryList.querys.forEach((item) => {
    data[item.field] = item.binddata;
  });
  axios.post(state.optionsTwo.dataUrl, data).then((res) => {
    state.dataList = res.data;
  });
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      axios.post(state.options.addUrl, state.formData).then((res) => {
        if (res.code == 200) {
          proxy.$refs["zujianname"].getData();
          state.addModal = false;
          proxy.$modal.msgSuccess(res.msg);
        }
      });
    }
  });
}

function submitFormedit() {
  proxy.$refs["formRefedit"].validate((valid) => {
    if (valid) {
      state.editformData.id = state.editId;
      axios.post(state.options.editUrl, state.editformData).then((res) => {
        if (res.code == 200) {
          proxy.$refs["zujianname"].getData();
          state.editModal = false;
          proxy.$modal.msgSuccess(res.msg);
        }
      });
    }
  });
}

function cancel() {
  state.addModal = false;
}

function canceledit() {
  state.editModal = false;
}

function getsubstationmodelList() {
  let arr = [];
  getlistSitesList().then((res) => {
    state.options.queryList.querys[0].options = Object.keys(res.data).map(
      (item) => {
        return {
          label: item + "-" + res.data[item],
          value: item,
        };
      }
    );
  });
  getlistmutationAlarmTypesList().then((res) => {
    state.stationmodelList = Object.keys(res.data).map((item) => {
      return {
        label: item,
        value: item,
        data: res.data[item],
      };
    });
  });
  getcompareTypesList().then((res) => {
    state.options.queryList.querys[1].options = res.data.map((item) => {
      return {
        label: item,
        value: item,
      };
    });
  });
}

function stationModelChange(val) {
  if (val == "瓦斯突变预报警") {
    state.optionsTwo.queryList.querys[3].binddata = true;
    state.comparaShow = true;
    state.stationmodelList.forEach((item) => {
      if (item.label == val) {
        state.stationInNumList = item.data;
      }
    });
    getpointList();
  } else {
    state.optionsTwo.queryList.querys[3].binddata = false;
    state.comparaShow = false;
    state.stationmodelList.forEach((item) => {
      if (item.label == val) {
        state.formData.comparationType = item.data.toString();
      }
    });
    getpointList();
  }
}
// 新增里面搜索按钮
function queryClick(type) {
  if (type == 1) {
    getpointList();
  } else {
    let data = {};
    state.optionsTwo.queryList.querys.forEach((item) => {
      if (item.type != "yincang") {
        item.binddata = undefined;
      } else {
        if (state.formData.mutationType == "瓦斯突变预报警") {
          item.binddata = true;
        } else {
          item.binddata = false;
        }
      }
    });
    getpointList();
  }
}
// 测点列表复选事件
function checkchange(e) {
  state.formData.pointDtoList = e.records;
}
getsubstationmodelList();
</script>
<style lang="scss" scoped>
::v-deep .twoTable .table_box {
  height: 200px !important;
  overflow-y: auto;
}

::v-deep .twoTable .table_box .hhhhh {
  height: 200px !important;
}

::v-deep .el-drawer {
  .querycss {
    .fsc {
      &:nth-child(2) {
        display: none;
      }
    }
  }

  .table_box {
    .fsc {
      display: none;
    }
  }
}
</style>
